
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right" v-loading='loading'>
          <top></top>
          <!-- <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台><router-link to="/finance/onlinecommission">线上结算的佣金收入</router-link></div>
          --><div class="hei10"></div>

                <div class="powertop">
                    <!-- <router-link class="powertopli powertopact" to="/finance/onlinecommission">佣金收入</router-link>
                    <router-link class="powertopli" to="/finance/onlinecommission/tkshouru">提卡费收入</router-link> -->
					<router-link class="powertopli powertopact" to="/finance/onlinecommission">原佣金收入</router-link>
                    <!-- <router-link class="powertopli " to="/yongjin/yongjinwai">佣金收入管理</router-link> -->
                    

                    <!-- <router-link class="powertopli " to="/yongjin/yongjinchaxun">佣金收入查询</router-link> -->
                    <router-link class="powertopli " to="/finance/onlinecommission/tkshouru">提卡费收入</router-link>
                </div>
                <div class="con" >
                    <div class="flex tktiao" style="width: 1116px;">
                        <div class="tkli tkact" @click="goto('/finance/onlinecommission')">线上结算的佣金收入</div>
                        <div class="tkli" @click="goto('/finance/onlinecommission/nolinecommission')">线下结算的佣金收入</div>
                    </div>
                    <div class="conleft">
                        <div class="l1">
                            <div class="l2">待申请提现</div>
                            <div class="l3">{{datas.status1 | qux}}</div>
                        </div>
                        <div class="l1">
                            <div class="l2">已申请提现</div>
                            <div class="l3">{{datas.status3 | qux}}</div>
                        </div>
                    </div>
                    <div class="meiyinhang" v-if="yinhang == false" @click="yinhangka = true">绑定银行卡</div>
                    <div class="conright"  v-if="yinhang == true">

                        <div class="youyinhang" >
                          <div>
                            <div>{{yinhangkaxinxi.open_bank}}</div>
                            <div>{{yinhangkaxinxi.bank_account  | jiami}}</div>
                          </div>
                          <div>
                            <el-button type="primary" size="mini" @click="yinhangka = true">修改</el-button>
                          </div>

                        </div>
                    </div>
                </div>
                <div class="conlist">
                  <div class="flex">
                    <div class="contilte">待提现佣金收入</div>
                    <div class="gorecord"><router-link to="/finance/onlinecommission/record">查看提现记录>></router-link></div>
                  </div>

                    <div class="list">
                        <div class="th">上游供应商</div>
                        <!-- <div class="th">佣金名称</div> -->
                        <div class="th">上游结算更新时间</div>
                        <div class="th">结算订单数量</div>
                        <div class="th">结算额度</div>
                        <div class="th">提卡费扣除</div>
                        <div class="th">可提现金额</div>
                        <div class="th td2">操作</div>
                    </div>
                    <div class="list" v-for="item in list" :key="item.id">
                        <div class="td">

                        <el-tooltip class="item" effect="dark" :content="item.up_name" placement="top-start">
                             <span> {{item.up_name}}</span>
                        </el-tooltip>

                        </div>
                        <!-- <div class="td">{{item.user_filename}}</div> -->
                        <div class="td">{{item.created_at}}</div>
                        <div class="td">{{item.count | qux}}</div>
                        <div class="td">{{item.sum_amount + item.expend_tika_cost | qux}}</div>
                        <div class="td">{{item.expend_tika_cost | qux}}</div>
                        <div class="td">{{item.sum_amount | qux}}</div>
                        <div class="td td2">
                            <el-button type="text" @click="gohecha(item.uid)">数据核查</el-button>
                            <el-button type="text" @click="down(item.local_filename)">下载佣金明细</el-button>
                            <el-button type="text" @click="shenqingtixian2(item)">申请提现</el-button>
                            <!-- <el-button type="text" @click="shenqingtixian(item.id)">申请提现</el-button> -->
                            
                        </div>
                    </div>
                   <!-- <el-pagination background layout="total,prev, pager, next" :current-page="page" @current-change="fanye" :page-size="pagesize" :total="total"></el-pagination> -->
                </div>
            </div>

        </div>
        <el-dialog title="银行卡信息配置" :visible.sync="yinhangka" :close-on-click-modal="false" width="600px">
            <div class="yinhangka">
              <div style="margin-bottom: 10px;">开户行</div>
              <div><el-input v-model="yinhangkaxinxi.bank" placeholder="请输入开户行"></el-input></div>
              <div style="margin-bottom: 10px;">开户支行</div>
              <div><el-input v-model="yinhangkaxinxi.open_bank" placeholder="请输入包含地级市的开户银行支行名称"></el-input></div>
              <!-- <el-input v-model="yinhangkaxinxi.bank" placeholder="请输入所属银行"></el-input> -->
              <div style="color: #f00;margin-bottom: 10px;">例：中国建设银行青岛市高新区支行</div>
              <div style="margin-bottom: 10px;">银行卡号</div>
              <el-input v-model="yinhangkaxinxi.bank_account" placeholder="请输入银行卡号"></el-input>
              <div style="margin-bottom: 10px;">开户人姓名</div>
              <el-input v-model="yinhangkaxinxi.bank_person" placeholder="请输入开户人姓名"></el-input>
              <div style="margin-bottom: 10px;">开户人身份证号</div>
              <el-input v-model="yinhangkaxinxi.user_id_num" placeholder="请输入开户人身份证号"></el-input>
              <div style="font-size: 18px;text-align: center;">
                为确保打款能顺利到账务必认真填写，第三方转账需要实名认证！
              </div>

            </div>
            <div slot="footer" class="dialog-footer">
                  <el-button type="primary" size="small"  @click="bangding">绑定</el-button>
              </div>
        </el-dialog>
        <!-- <foot></foot> -->
        <!-- 真正提现弹窗 -->
        <el-dialog
          title="申请提现"
          :visible.sync="applywindow"
          :close-on-click-modal="false"
          width="820px">
          <div style="display: flex;margin-bottom: 35px;align-items: center;">
            <div style="margin-right: 25px;">收款账户</div>
            <div  v-if="seestatus==2" style="margin-right: 25px;width: 147px;">{{yinhangkaxinxi.bank_account  | jiami}}</div>
            <div v-if="seestatus==1" style="margin-right: 25px;width: 147px;">{{yinhangkaxinxi.bank_account}}</div>
            <img v-if="seestatus==2" @click="changesee(1)" style="margin-right: 74px;width: 14px;height: 11px;cursor: pointer;" src="../../../static/img/openeye.png" >
            <img v-if="seestatus==1" @click="changesee(2)" style="margin-right: 74px;width: 14px;height: 11px;cursor: pointer;" src="../../../static/img/closeeye.png" >
            <div>{{yinhangkaxinxi.open_bank}}</div>
          </div>
          <div style="display: flex;margin-bottom: 25px;">
            <div style="margin-right: 25px;margin-top: 8px;">发票类型</div>
            <div style="width: 240px;margin-right: 20px;">
              <el-select v-model="txform.type" @change="changefptype" style="width:100%" placeholder="请选择">
                <el-option
                  v-for="item in options1"
                  :key="item.type"
                  :label="item.title"
                  :value="item.type">
                </el-option>
              </el-select>
              <el-button @click="checkinfo(1)" type="text" >查看开票信息</el-button>
            </div>
            <div style="margin-right: 25px;margin-top: 8px;">发票介质</div>
            <div style="width: 240px;">
              <el-select :disabled="txform.type==0||txform.type==1" @change="changeclasstype" v-model="txform.class" style="width:100%"  placeholder="请选择">
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-button @click="checkinfo(2)" type="text" >查看邮寄地址</el-button>
            </div>
          </div>
          <div v-if="txform.class==1" style="margin-bottom: 10px;">上传电子发票</div>
          <el-upload
            v-if="txform.class==1"
            style="width:240px"
            action="#"
            :auto-upload="false"
            :on-change="uploadok"
            :on-remove="handleRemove"
            accept=".pdf"
            multiple
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip"  class="el-upload__tip">发票需为*.PDF</div>
          </el-upload>
          <div v-if="txform.class==2" style="margin-bottom: 20px;">纸质发票邮寄单号</div>
          <el-select v-if="txform.class==2" v-model="txform.tracking_company_id" style="margin-bottom: 20px;width: 240px;" placeholder="选择物流公司">
            <el-option
              v-for="item in options3"
              :key="item.id"
              :label="item.company"
              :value="item.id">
            </el-option>
          </el-select>
          <div v-if="txform.class==2" style="width: 240px;">
            <el-input v-model="txform.tracking_number" style="width: 100%;" placeholder="输入物流单号"></el-input>
          </div>
          <div style="margin-top: 25px;display: flex;justify-content: space-around;background-color: #fff5f5;border-radius: 10px;margin-bottom: 30px;padding: 20px;">
            <div style="text-align: center;">
              <div>提现金额</div>
              <div class="t_money_font" >￥{{ this.moneyobj.sum_amount }}</div>
            </div>
            <div style="text-align: center;">
              <div>增值税税额</div>
              <div class="t_money_font">￥{{ this.moneyobj.invoice }}</div>
            </div>
            <div style="text-align: center;">
              <div>实际到账金额</div>
              <div class="t_money_font">￥{{ this.moneyobj.real_amount }}</div>
            </div>
          </div>
          <div style="text-align: right;">
            <el-button round @click="applywindow = false">取消</el-button>
            <el-button round type="primary" @click="updatetjsq">提交申请</el-button>
          </div>
        </el-dialog>
        <!-- 开票信息 -->
        <el-dialog
          title="开票信息"
          :visible.sync="isshowkp"
          width="630px">
          <div>
            {{ kpinfo }}
          </div>
          <div style="text-align: center;">
            <el-button type="primary" @click="isshowkp = false">确定</el-button>
          </div>
        </el-dialog>
        <!-- 邮寄地址 -->
        <el-dialog
          title="邮寄地址"
          :visible.sync="isshowyj"
          width="650px">
          <div>收件人：{{ yjform.address_name }}</div>
          <div style="margin-top: 25px;margin-bottom: 25px;">联系电话：{{ yjform.address_mobile }}</div>
          <div>收货地址：{{ yjform.address_province }}{{ yjform.address_city }}{{ yjform.address_district }}{{ yjform.address }}</div>
          <div style="text-align: center;margin-top: 35px;">
            <el-button type="primary" @click="isshowyj = false">确定</el-button>
          </div>
        </el-dialog>

    </div>

</template>

<script>
    import * as qiniu from 'qiniu-js'
    import alljs from "../../assets/all.js"
    import axios from 'axios'
    import top from '@/components/top.vue'
    import left from '@/components/left.vue'
    import foot from '@/components/foot.vue'
    import QRcode from '@xkeshi/vue-qrcode';
    import moment from "moment";
    import qu0 from '../../../public/qu0.js'
    export default {
        components: {
            "left": left,
            "top": top,
            "foot": foot,
            qrcode : QRcode
        },
        name: "onlinecommission",
        data() {
            return {
                yinhangkaxinxi:{},
                yinhangka:false,

                month:"",
                total:0,
                pagesize:20,
                page:1,
                list:"",
                loading:true,
                form:{},
                datas:{
                  status1: 0,
                  status2: 0,
                  status3: 0,
                  status4: 0
                },
                url:"",
                yinhang:false,
                applywindow:false,
                options1: [],
                options2: [
                  {
                    value: '1',
                    label: '电子发票'
                  },
                  {
                    value: '2',
                    label: '纸质发票'
                  },
                ],
                options3: [],
                fileList: [],
                seestatus:2,
                isshowkp:false,
                isshowyj:false,
                nowchooseitem:{},
                txform:{
                  id:'',
                  type:'',
                  class:'',
                  file:'',
                  tracking_company_id:'',
                  tracking_number:'',
                },
                moneyobj:{
                  sum_amount:0,
                  invoice:0,
                  real_amount:0,
                },
                kpinfo:'',
                yjform:{
                    address_name:'',
                    address_mobile:'',
                    address_province:'',
                    address_city:'',
                    address_district:'',
                    address:'',
                }
            }
        },
        filters: {
            qux:function(dataStr){
                return qu0.qu0(dataStr)
            },
            jiami:function(num){
                var q4 = ""
                var h4 = ""
                if(num){
                  q4 = num.substr(0,4);
                  h4 = num.substr(num.length-4,4);
                }
                return q4+"********"+h4
            }
        },
        created() {
            this.url = window.location.origin+"/"
            var that = this
            this.getlist()
            this.getbindcard()
        },
        mounted() {

        },
        methods: {
            goto:function(url){
              this.$router.push(url)
            },
            //绑定银行卡
            bangding:function(){

              if(this.yinhangkaxinxi.user_id_num){
                this.yinhangkaxinxi.user_id_num = this.yinhangkaxinxi.user_id_num.trim()
              }

              if(!alljs.checkidnum(this.yinhangkaxinxi.user_id_num)){
                return false
              }

              var that = this
              var data = {
                // bank:this.yinhangkaxinxi.bank,
                bank:this.yinhangkaxinxi.bank,
                bank_person:this.yinhangkaxinxi.bank_person,
                bank_account:this.yinhangkaxinxi.bank_account,
                open_bank:this.yinhangkaxinxi.open_bank,
                user_id_num:this.yinhangkaxinxi.user_id_num
              }
              axios.post('/api/plan-market/commission/bindcard',data)
              	.then(response => {
              		if(response.data.msg.code == 0){
                      that.$message.success("绑定成功");
                      that.getbindcard()
                      that.yinhangka = false
              		}else{
                      that.$message.error(response.data.msg.info);
              		}
              	})


            },
            getbindcard:function(){
              var that = this
              axios.get('/api/plan-market/commission/getbindcard')
              	.then(response => {
              		if(response.data.msg.code == 0){
                      that.yinhangkaxinxi = response.data.data
                      if(response.data.data.bank != ''){
                          that.yinhang = true

                      }
              		}else{
                      that.$message.error(response.data.msg.info);
              		}
              	})
            },
            //下载佣金明细
            down:function(url){
                const a = document.createElement('a');
                a.setAttribute('href', this.url + url);
                a.click();
            },
            //申请提现
            shenqingtixian:function(id){
                if(this.yinhangkaxinxi.bank == ''){
                    this.yinhangka = true
                    return false
                }
                var that = this
                axios.post('/api/plan-market/commission/up/confirm',{ids:[id]})
                	.then(response => {
                		if(response.data.msg.code == 0){
                        that.loading = true
                        that.getlist()
                        that.$message.success("申请成功");
                		}else{
                        that.$message.error(response.data.msg.info);
                		}
                	})
            },
            //申请提现-新
            shenqingtixian2:function(item){
                if(this.yinhangkaxinxi.bank == ''){
                    this.yinhangka = true
                    return false
                }
                this.nowchooseitem = item
                this.txform.id = item.id
                this.txform.type = ''
                this.txform.class = ''
                this.txform.file = ''
                this.txform.tracking_company_id = ''
                this.txform.tracking_number = ''
                //获取发票类型
                this.getfptype()
                //获取快递公司
                this.gettracklist()
                //计算金额
                this.computedmoney()
                this.applywindow = true
            },
            //获取发票类型
            getfptype(){
                axios.get('/api/plan-market/commission/invoice/type')
                	.then(response => {
                		if(response.data.msg.code == 0){
                        console.log('发票类型')
                        console.log(response.data.data)
                        this.options1 = response.data.data
                		}else{
                			this.$message.error(response.data.msg.info);
                		}
                	})
            },
            //获取快递公司
            gettracklist:function(){
                axios.get('/api/plan-market/logistics-companies')
                	.then(response => {
                    console.log('获取快递公司')
                    console.log(response)
                		this.options3 = response.data.data
                	})
            },
            //计算金额
            computedmoney(){
              if(this.txform.type==''){
                var type = 0
              }else{
                var type = this.txform.type
              }
              axios.get('/api/plan-market/commission/invoice/amount',{
                params:{
                  id:this.txform.id,
                  type:type
                }
              }).then(response => {
                console.log('计算金额')
                console.log(response)
                this.moneyobj = response.data.data
              })
            },
            //切换发票类型
            changefptype(val){
              console.log(val)
              //计算金额
              this.computedmoney()
              if(val==1){
                this.txform.tracking_company_id = ''
                this.txform.tracking_number = ''
                this.txform.file = ''
                this.txform.class = ''
              }
            },
            //切换发票介质
            changeclasstype(val){
              if(val==1){
                //电子
                this.txform.tracking_company_id = ''
                this.txform.tracking_number = ''
              }
              if(val==2){
                //纸质
                this.txform.file = ''
              }
            },
            gohecha:function(id){
              this.$router.push({
              	path: '/finance/onlinecommission/fazhan',
              	query: { id:id }
              })
            },
            search:function(){
                this.getlist()
            },
            //翻页
            fanye:function(page){
            	this.loading = true
            	this.page = page
            	this.getlist()
            },
            //获取列表
            getlist:function(){
                var that = this
                axios.get('/api/plan-market/commission/online')
                	.then(response => {
                		if(response.data.msg.code == 0){
                        that.datas = response.data.data.data[0]
                        that.list = response.data.data.list
                        that.loading = false
                		}else{
                			that.$message.error(response.data.msg.info);
                		}
                	})
            },
            //删除文件
            handleRemove(file, fileList) {
              console.log('删除文件')
              console.log(fileList);
              this.txform.file = ''
            },
            getRandomChar:function(len = 11)  {
              var  x = "0123456789qwertyuioplkjhgfdsazxcvbnm" // 需要什么字符这里添加
              var  tmp = ""
              var timestamp = new Date().getTime();
              for(var  i=0;i<len;i++)  {
                tmp += x.charAt(Math.ceil(Math.random()*100000000)%x.length);
              }
              return  timestamp+tmp;
            },
            //上传文件
            uploadok: function(file,fileList) {
              console.log(file)
              
              let name = this.getRandomChar() + '.' + file.raw.name.split('.')[1]
              
              this.fileList = []
              var that = this
             
              axios.get(`/api/system/qiniu/upload_token2`,{
                params:{bucket:'test91'}
              })
                .then(response => {

                 

                 
                  if(response.data.msg.code == 0){
                    const observer = {
                      next(res){
                        // console.log(res)
                        // ...
                      },
                      error(err){
                        console.log(err)
                        // ...
                      },
                      complete(res){
                        console.log(res)
                        console.log("https://test91.91haoka.cn/"+res.data)
                        that.fileList.push({name:file.raw.name,url:"https://test91.91haoka.cn/"+res.data})
                        that.txform.file = "https://test91.91haoka.cn/"+res.data
                      }
                    }
                    
                    const observable = qiniu.upload(file.raw,name, response.data.data, {}, {})
                    
                    const subscription = observable.subscribe(observer) // 上传开始
                  }else{
                    this.$message.error(response.data.msg.info);
                  }
                });
            },
            //切换眼睛状态
            changesee(type){
              this.seestatus = type
            },
            //查看信息
            checkinfo(type){
              //获取开票信息和地址
              this.getkpordz()
              if(type==1){
                this.isshowkp = true
              }
              if(type==2){
                this.isshowyj = true
              }
            },
            //获取开票信息和地址
            getkpordz(){
              axios.get("/api/plan-market/commission/get/invoice/info",{
                params:{
                  id:this.nowchooseitem.id
                }
              }).then(response => {
                  if (response.data.msg.code == 0) {
                      console.log('获取开票信息和地址')
                      this.kpinfo = response.data.data.info
                      this.yjform.address_name = response.data.data.address_name
                      this.yjform.address_mobile = response.data.data.address_mobile
                      this.yjform.address = response.data.data.address
                      this.yjform.address_province = response.data.data.address_province
                      this.yjform.address_city = response.data.data.address_city
                      this.yjform.address_district = response.data.data.address_district
                  } else {
                    this.$message.error(response.data.msg.info);
                  }
                });
            },
            //提交申请
            updatetjsq(){
                if(this.txform.type.toString()==''){
                  this.$message.error('请选择发票类型');
                  return
                }
                if(this.txform.type.toString()!='1'&&this.txform.class==''){
                  this.$message.error('请选择发票介质');
                  return
                }
                if(this.txform.class==1){
                  if(this.txform.file==''){
                    this.$message.error('请上传电子发票');
                    return
                  }
                }
                if(this.txform.class==2){
                  if(this.txform.tracking_company_id==''){
                    this.$message.error('请选择物流公司');
                    return
                  }
                  if(this.txform.tracking_number==''){
                    this.$message.error('请输入物流单号');
                    return
                  }
                }
                
                axios.post('/api/plan-market/commission/new/up/confirm',this.txform)
              	.then(response => {
              		if(response.data.msg.code == 0){
                      this.applywindow = false
                      this.$message({
                        message: '操作成功',
                        type: 'success'
                      });
                      this.getlist()
              		}else{
                      this.$message.error(response.data.msg.info);
              		}
              	})
                
            }
        }
    }
</script>

<style scoped>
.t_money_font{
  color: #FE3D3D;
  font-weight: bold;
  font-size: 18px;
}
</style>

<style lang="scss" scoped>
    .index{

        .moneylist{ display: flex;}
        .gorecord{  line-height: 50px; padding-right: 20px;
          a{ color: #1989FA;}
        }
        .yinhangka{
          input{ margin-bottom: 20px;}
        }
        .erimg{ width: 200px;}
        .red{ border: 1px #FF3B3B solid !important; color: #FF3B3B !important;}
        .moneylist div{ border: 1px #AAAAAA solid; width: 85px; height: 35px; line-height: 35px; text-align: center; margin-right: 10px; cursor: pointer;}

                .title{border-bottom: 1px #EAEAEA solid;  line-height: 45px; padding-left: 30px; font-size: 16px; background: #F9F9F9; color: #727272}


            .powertop {
            	display: flex;
            	background:#f9f9f9;
            }
            .powertopli {
            	flex-basis: 180px;
            	line-height: 50px;
            	border-bottom: 3px #F9F9F9 solid;
            	color: #727272;
            	border-right: 1px #F9F9F9 solid;
            	font-size: 16px;
            	text-align: center;
            }
            .router-link-active {
            	background: #FFFFFF;
            	border-bottom: 3px #2974FF solid;
            }
            .con{  background: #FFFFFF; padding: 30px 20px; display: flex; justify-content: space-between; flex-wrap: wrap;
                .conleft{ display: flex; flex-basis: 600px;
                  .l1{ flex-basis: 150px; text-align: center; font-size: 16px;}
                  .l2{ margin-bottom: 20px; color:#535353}
                  .l3{ color: #FF003D; font-size: 18px; font-weight: bold;}
                }
                .tktiao{ margin-bottom: 20px; display: flex; width: 100%;
                  .tkli{ flex: 1; text-align: center;  background: url(../../../static/img/duanhui.png) no-repeat; line-height: 38px; cursor:pointer;}
                  .tkact{ background: url(../../../static/img/duanhong.png) no-repeat; color:#FFFFFF;}
                }
                .meiyinhang{ background: #EEF7FF; color: #FFFFFF; padding: 10px 20px; height:20px; line-height: 20px; border-radius: 3px; cursor:pointer}
                .conright{  padding: 10px 20px;border-radius: 3px;  background: #EAEAEA; width: 300px; border: 1px #C8C9CC solid;
                  a{ color:#197CFF;}

                  .youyinhang{ display: flex; justify-content: space-between; line-height: 30px;}
                }

            }
            .conlist{ padding-bottom: 20px; margin-top: 20px; background: #FFFFFF; min-height: 800px;
                .contilte{ line-height: 50px; padding-left: 20px; font-size: 15px; font-weight: bold; background: #FFFFFF;}
                .flex{ display: flex; justify-content: space-between}

                .gong{ display: flex;
                    .el-input__inner{ width: 250px;}
                    .el-button--danger{ margin-left: 20px;}
                }
                .list{ display: flex;  border-bottom: 1px #eaeaea solid;
                    .th{ background: #EAEAEA; text-align: center; flex: 1; padding: 15px 0; font-size: 14px; }
                    .td{ background: #ffffff; text-align: center; flex: 1; padding: 5px 5px;  font-size: 14px;  overflow:
                    hidden;white-space: nowrap;text-overflow: ellipsis;display: flex;
                  flex-wrap: wrap;align-items: center;justify-content:center}
                }
                .td2{ flex:2 !important;}
            }

    }
</style>
